<template>
	<el-container>
		<el-header>
			 <el-page-header icon="sc-icon-Project" title="项目概况" @back="goBack" content="哪些年，我经历的项目...(持续更新中)">
			 </el-page-header>
			<el-button type="primary" round @click="goInSys">进入系统</el-button>
		</el-header>
		<el-main >
            <el-row :gutter="0">
                <el-col :span="8" :offset="8">
                    <el-divider content-position="center">平台设计</el-divider>
                    <el-row :gutter="0">
                            <el-col :span="6">
                                <div class="icon-box">
                                    <el-icon> 
                                       <sc-icon-Project />
                                    </el-icon>
                                    <p>xxx</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="icon-box">
                                    <el-icon> <sc-icon-Project /></el-icon>
                                    <p>xxx</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="icon-box">
                                    <el-icon> <sc-icon-Project /></el-icon>
                                    <p>xxx</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="icon-box">
                                    <el-icon> <sc-icon-Project /></el-icon>
                                    <p>xxx</p>
                                </div>
                            </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <!-- 第二栏目 -->
            <el-row :gutter="0">
                <el-divider content-position="center">系统</el-divider>
                <el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col>


                    <el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col>
                    <el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col>
                    <el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col>
                    <el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col><el-col :span="2">
                    <div class="icon-box">
                        <el-icon> <sc-icon-Project /></el-icon>
                        <p>xxx</p>
                                </div>
                    </el-col>
                    
            </el-row>
		</el-main>
		<el-footer>
			<div style="text-align:center">
				&copy;linrk.cn
			</div>
			
		</el-footer>
	</el-container>
</template>

<script>


	export default {
		name: '软件实例',
        methods: {
            goInSys() {
                this.$router.replace({
					path: '/login'
				})
            },
            goBack(){
                this.$router.replace({
					path: '/'
				})
            }
        },
	}
</script>

<style>

    .box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
	.icon-box {height:120px;text-align: center;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;padding:30px 10px;}
	.icon-box i {font-size: 26px;transition: color .15s linear;}
	.icon-box p {color: #999;margin-top: 15px;transition: color .15s linear;}
	.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}

	.dark .box {border-color: var(--el-border-color-light);}
	.dark .icon-box {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
</style>